<script setup>
import {onMounted, ref, watch} from 'vue';
import {ElMessage} from "element-plus";
import axios from "axios";



// 对话框控制
const showDialog = ref(false);
const cancelDialog = ref(false);
const rejectDialog = ref(false);

// 健康随访表单
const healthFormRef = ref(null);
const healthForm = ref({});

// 取消预约表单
const cancelFormRef = ref(null);
const cancelForm = ref({});

// 驳回表单
const rejectFormRef = ref(null);
const rejectForm = ref({});

//父值传入弹窗打开
const props  = defineProps({
  addDialog:{
    type:Boolean,
    required:false,
    default: false
  },
  cancelDialogVisible:{
    type:Boolean,
    required:false,
    default: false
  },
  rejectDialogVisible:{
    type:Boolean,
    required:false,
    default: false
  },
  residentId: {
    type: Number,
    required: false,
    default: null // 或者您想要的默认值
  },
  contractId: {
    type: Number,
    required: false,
    default: null // 或者您想要的默认值
  },
})
watch(()=>props.addDialog,(newVal)=>{
  showDialog.value = newVal;
})
watch(()=>props.cancelDialogVisible,(newVal)=>{
  cancelDialog.value = newVal;
})
watch(()=>props.rejectDialogVisible,(newVal)=>{
  rejectDialog.value = newVal;
})
watch(()=>props.residentId,(newVal)=>{
  healthForm.value.residentId = newVal;

})
watch(()=>props.contractId,(newVal)=>{
  healthForm.value.contractId = newVal;
  cancelForm.value.contractId = newVal;
  rejectForm.value.contractId = newVal;
})

// 验证规则
const healthRules = {
  bloodPressure: [{ required: true, message: '血压不能为空', trigger: 'blur' }],
  fastingBloodGlucose: [{ required: true, message: '血糖不能为空', trigger: 'blur' }],
  heartRate: [{ required: true, message: '心率不能为空', trigger: 'blur' }],
  conditionDescription: [{ required: true, message: '请输入病情描述', trigger: 'blur' }],
  healthGuidance: [{ required: true, message: '请输入健康指导', trigger: 'blur' }]
};

const cancelRules = {
  cancelReason: [{ required: true, message: '取消原因不能为空', trigger: 'blur' }]
};

const rejectRules = {
  rejectReason: [{ required: true, message: '驳回原因不能为空', trigger: 'blur' }]
};

// 提交方法
const confirmSubmit = async () => {
    await healthFormRef.value.validate();
    axios.put('/health/updateHealth',healthForm.value).then(resp => {
      resetForm()
      ElMessage.success(resp.data)
    })
    showDialog.value = false;

};

const confirmCancel = async () => {
    await cancelFormRef.value.validate();
    axios.put('/contract/updateCancel',cancelForm.value).then(resp => {
      resetForm()
      ElMessage.warning(resp.data)
    })
    cancelDialog.value = false;

};

const userName = ref("admin")
const confirmReject = async () => {
    await rejectFormRef.value.validate();
    rejectForm.value.userName = userName.value;
    axios.put('/contract/updateReject',rejectForm.value).then(resp => {
      resetForm()
      ElMessage.warning(resp.data)
    })
    rejectDialog.value = false;
};
//取消
//子值传回父值
const emits = defineEmits("")
const resetForm = () => {
  showDialog.value = false;
  emits("showDialog",showDialog.value);
  cancelDialog.value = false;
  emits("cancelDialog",cancelDialog.value);
  rejectDialog.value = false;
  emits("rejectDialog",rejectDialog.value);

};
onMounted(()=>{
})
</script>

<template>
<!--  健康随访信息-->
  <div class="app-container">
    <el-dialog
        v-model="showDialog"
        width="350px"
    >
      <template #header>
        <div style="text-align: left; font-size: 20px;">
          填写健康随访信息
        </div>
      </template>
      <el-form label-width="80px" ref="healthFormRef" :rules="healthRules" :model="healthForm">
        <el-form-item label="血压" prop="bloodPressure">
          <el-input v-model="healthForm.bloodPressure" placeholder="请输入" style="width: 120px" />
          <span class="unit">mmHg</span>
        </el-form-item>
        <el-form-item label="空腹血糖" prop="fastingBloodGlucose">
          <el-input v-model="healthForm.fastingBloodGlucose" placeholder="请输入" style="width: 120px"/>
          <span class="unit">mmol/L</span> <!-- 血糖单位应为 mmol/L -->
        </el-form-item>
        <el-form-item label="心率" prop="heartRate">
          <el-input v-model="healthForm.heartRate" placeholder="请输入" style="width: 120px"/>
          <span class="unit">次/分</span> <!-- 心率单位应为 次/分 -->
        </el-form-item>
        <el-form-item label="病情描述" prop="conditionDescription">
          <el-input v-model="healthForm.conditionDescription" type="textarea" placeholder="请输入" :autosize="{ minRows: 3, maxRows: 10 }" />
        </el-form-item>
        <el-form-item label="健康指导" prop="healthGuidance">
          <el-input v-model="healthForm.healthGuidance" type="textarea" placeholder="请输入" :autosize="{ minRows: 3, maxRows: 10 }"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="confirmSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>

<!--  取消预约服务-->
  <div class="app-container">

    <el-dialog
        v-model="cancelDialog"
        width="350px"
    >
      <template #header>
        <div style="text-align: left; font-size: 20px;">
          取消预约服务确认
        </div>
      </template>
      <el-form label-width="80px" ref="cancelFormRef" :rules="cancelRules " :model="cancelForm">
        <el-form-item label="取消原因" prop="cancelReason">
          <el-input v-model="cancelForm.cancelReason" type="textarea" placeholder="请输入" :autosize="{ minRows: 3, maxRows: 10 }"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="confirmCancel">确定</el-button>
      </template>
    </el-dialog>
  </div>

<!--  驳回确认-->
  <div class="app-container">
    <el-dialog
        v-model="rejectDialog"
        width="350px"
    >
      <template #header>
        <div style="text-align: left; font-size: 20px;">
          驳回确认
        </div>
      </template>
      <el-form label-width="80px" ref="rejectFormRef" :rules="rejectRules" :model="rejectForm">
        <el-form-item label="驳回原因" prop="rejectReason">
          <el-input v-model="rejectForm.rejectReason" type="textarea" placeholder="请输入" :autosize="{ minRows: 3, maxRows: 10 }"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="confirmReject">确定</el-button>
      </template>
    </el-dialog>
  </div>

</template>

<style scoped>
.unit {
  margin-left: 5px;
  color: #999;
}
</style>